<style>
	.drawBack{
		background-image: url(./res/img/lbcj.png);
		background-repeat: no-repeat;
		background-size: 100%;
		font-family: "PingFangSC-Regular";
		width:7.5rem;
		height:12.07rem;
		padding-top:5.16rem;
		position:relative;
	}
	.integralData{
		position:relative;
		margin-left:1.59rem;
		color: #FDFC00;
		font-weight:bold;
		font-family:DFPHeiW12;
		font-size:0.22rem;
	}
	.integralData span.point{
		margin-left:1.7rem;
	}
	.integralData span.userCurPoint{
		margin-left:1.95rem;
	}
	.twinkle,.twinkleTwo{
		width: 6.5rem;
		height: 6.6rem;
		background-size: 100%;
		background-repeat: no-repeat;
		margin: 0.33rem auto 0 auto;
	}
	.twinkle{
		background-image: url(./res/img/twinkle.png);
	}
	.twinkleTwo{
		background-image: url(./res/img/twinkleTwo.png);
	}
	#btn .cjBtnDom,#btn .cjBtn,.twinkle .active,.twinkle td{
		width: 1.83rem;
		height: 1.84rem;
		background-repeat: no-repeat;
		background-size: 100%;
	}
	#btn.cjBtn{
		background-image: url(./res/img/buttonUp.png);
	}
	#btn.cjBtnDom{
		background-image: url(./res/img/buttonDown.png);
	}
	#luck .active{
		background-image: url(./res/img/active.png);
	}
	.twinkle td img{
		width:1.05rem;
		height:1.05rem;
		padding-top: 0.13rem;
		background-size:100%;
	}
	.twinkle td span{
		display:block;
		color:#8D5F5F;
		font-size:0.22rem;
		font-family:PingFang-SC-Regular;
	}
	.twinkle td{
		/*padding-top: 0.05rem;*/
		text-align: center;
		vertical-align:top;
		background-image: url(./res/img/proBj.png);
	}
	.twinkle table{
		padding: 0.4rem;
	}
	.rule{
		margin:1.35rem 0.4rem 0;
		line-height:0.4rem;
		font-size:0.24rem;
		color:#fff;
		text-align:center;
		font-family:MicrosoftYaHei-Bold;
	}
	.prizeBack{
		width:100%;
		height:100%;
		background-color:#00000063;
		position:fixed;
		top:0;
		left:0;
	}
	/*弹框盒子*/
	.prizeAlert {
		position:absolute;
		width:4.4rem;
		height:2rem;
		border-radius:0.05rem;
		background-color:#fff;
		top:34.5%;
		left:50%;
		transform:translate(-50%,0);
		-webkit-transform:translate(-50%,0);
		-moz-transform:translate(-50%,0);
		-ms-transform:translate(-50%,0);
		-o-transform:translate(-50%,0);
		border-radius:0.2rem;
		text-align:center;

	}
	.fadeInDown {
		animation: fadeInDown 0.3s forwards;
		-webkit-animation: fadeInDown 0.3s forwards;
		-moz--animation: fadeInDown 0.3s forwards;
		-ms-animation: fadeInDown 0.3s forwards;
		-o--animation: fadeInDown 0.3s forwards;
	}
	@keyframes fadeInDown{
		0% {
			opacity: 0;
			-webkit-transform: translate(-50%, -40%);
			-ms-transform: translate(-50%, -40%);
			transform: translate(-50%, -40%);
		}

		100% {
			opacity: 1;
			-webkit-transform: translate(-50%, 0);
			-ms-transform: translate(-50%, 0);
			transform: translate(-50%, 0);
		}
	}
	@-webkit-keyframes fadeInDown{
		0% {
			opacity: 0;
			-webkit-transform: translate(-50%, -40%);
			-ms-transform: translate(-50%, -40%);
			transform: translate(-50%, -40%);
		}

		100% {
			opacity: 1;
			-webkit-transform: translate(-50%, 0);
			-ms-transform: translate(-50%, 0);
			transform: translate(-50%, 0);
		}
	}
	@-moz-keyframes fadeInDown{
		0% {
			opacity: 0;
			-webkit-transform: translate(-50%, -40%);
			-ms-transform: translate(-50%, -40%);
			transform: translate(-50%, -40%);
		}

		100% {
			opacity: 1;
			-webkit-transform: translate(-50%, 0);
			-ms-transform: translate(-50%, 0);
			transform: translate(-50%, 0);
		}
	}
	@-ms-keyframes fadeInDown{
		0% {
			opacity: 0;
			-webkit-transform: translate(-50%, -40%);
			-ms-transform: translate(-50%, -40%);
			transform: translate(-50%, -40%);
		}

		100% {
			opacity: 1;
			-webkit-transform: translate(-50%, 0);
			-ms-transform: translate(-50%, 0);
			transform: translate(-50%, 0);
		}
	}
	/*弹框内容*/
	.participation p{
		height:0.5rem;
		padding:0.25rem 0.5rem 0.65rem;
		line-height:0.5rem;
		font-size:0.35rem;
		color:#ff5a5a;
	}
	.participationClose{
		background-color:#A145FE;
		height:0.7rem;
		line-height:0.7rem;
		border-bottom-left-radius:0.2rem;
		border-bottom-right-radius:0.2rem;
	}
	.participationClose a,.participationClose span{
		color:#fff;
		font-size:0.3rem;
	}
	.participationClose a{
		padding:0 0.3rem;
		cursor:pointer;
		text-decoration:none;
	}
</style>
<div class="drawBack">
	<div class="integralData">
		<sapn>{{record.userCurTimes=='0'?'0':(record.userCurTimes|| recordView.remainTimes)}}/5</sapn>
		<span class="point">{{record.point || recordView.needPoints}}</span>
		<span class="userCurPoint">{{record.userCurPoint=='0'?'0':(record.userCurPoint || recordView.remainPoint)}}</span>
	</div>
	<div class="twinkle" id="deng">
		<div id="luck"><!-- luck -->
			<table cellspacing="3">
				<tr >
					<td class="luck-unit luck-unit-0 ">
						<img ng-src="{{records[0].productImg}}" >
						<span>{{records[0].productName}}</span>
					</td>
					<td class="luck-unit luck-unit-1">
						<img ng-src="{{records[1].productImg}}">
						<span>{{records[1].productName}}</span>
					</td>
					<td class="luck-unit luck-unit-2">
						<img ng-src="{{records[2].productImg}}">
						<span>{{records[2].productName}}</span>
					</td>
				</tr>
				<tr>
					<td class="luck-unit luck-unit-7">
						<img ng-src="{{records[7].productImg}}">
						<span>{{records[7].productName}}</span>
					</td>
					<td  class="cjBtn" id="btn"></td>
					<td class="luck-unit luck-unit-3">
						<img ng-src="{{records[3].productImg}}">
						<span>{{records[3].productName}}</span>
					</td>
				</tr>
				<tr>
					<td class="luck-unit luck-unit-6">
						<img ng-src="{{records[6].productImg}}">
						<span>{{records[6].productName}}</span>
					</td>
					<td class="luck-unit luck-unit-5">
						<img ng-src="{{records[5].productImg}}">
						<span>{{records[5].productName}}</span>
					</td>
					<td class="luck-unit luck-unit-4">
						<img ng-src="{{records[4].productImg}}">
						<span>{{records[4].productName}}</span>
					</td>
				</tr>
			</table>
		</div><!-- luckEnd -->
	</div>
	<div class="prizeBack"  ng-show="luck.prizeAlertShow " >
		<div class="prizeAlert" ng-class="{ 'fadeInDown':luck.prizeAlertShow}">
			<div class="participation" >
				<p >{{isEableLottery=='Y'&& record.categoryId!='CJ_01_008' ? '恭喜您抽中'+record.giftName:isEableLottery=='Y'&& record.categoryId=='CJ_01_008'? record.giftName : isEableLottery=='N'&& ( pointDraw==false? true : insufficientDraw==false ? true :false) ? "您目前的薏米不足": isEableLottery=='N'&& (record.userCurTimes==0 || recordView.remainTimes==0)? "您今日的抽奖次数已经用完":"" }}</p><!--积分不足和抽奖次数用完-->
				<div class="participationClose" ng-show="(isEableLottery=='Y' && (record.categoryId=='CJ_01_008'? false: record.categoryId=='CJ_01_007'?false:true))">
					<a ng-click="luck.close()">我知道了</a><span>|</span><a onclick="useGift()">立即使用</a>
				</div>
				<div class="participationClose" ng-show="isEableLottery=='N'|| record.categoryId=='CJ_01_008'|| record.categoryId=='CJ_01_007'">
					<a ng-click="luck.close()">我知道了</a>
				</div>
			</div>
		</div>
	</div>
	<div class="rule ">
		<p ng-bind-html="recordView.activityText | to_trusted"></p>
	</div>
</div>
<script>
    document.title = "抽奖";//页面标题
    var ua = navigator.userAgent.toLowerCase();
    console.log(ua)
    if(/iphone/.test(ua)||/ios/.test(ua)||/ipad/.test(ua)||/^apple$/.test(ua)){
        navTitleHandler( title ='抽奖')
    }
    //跳转到APP原生页
    function useGift() {
        if(/iphone/.test(ua)||/ios/.test(ua)||/ipad/.test(ua)||/^apple$/.test(ua)){
            lotteryHandler(lotteryId = "lotterIdeeee")
        }
        if(/android/.test(ua)){
            window.Hstation.getData()
        }
    }
</script>